<script setup lang="ts">
import { ref } from "vue";
import { LMarker } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { deletePoint, queryPoints } from "@/api/pipe";
import LMarkerClusterGroup from "../MarkerCluster/index.vue";
import "vue-leaflet-markercluster/dist/style.css";
import { getAssetsFile } from "@/utils/map";
import { useLocalStore } from "@/views/layer/area/store";
const { L }: any = window;
const props = defineProps({
  deviceCategoryList: Array<any>,
});
const pointListRef = ref([]);
const mapStore = useMapStore();
const localStore = useLocalStore();
const { mapAction } = storeToRefs(mapStore);
const { markerClusterFlag } = storeToRefs(localStore);
const onClick = (e: any) => {};
const getAllPoints = () => {
  queryPoints({ pageSize: 100000, pageIndex: 1, isPublic: true }).then(
    ({ data, errors, succeeded }) => {
      if (succeeded && Array.isArray(data?.items)) {
        pointListRef.value = data.items
          .filter((item: any) => item.jsonGeom)
          .map((item: any) => {
            const [lng, lat] = JSON.parse(item.jsonGeom).coordinates;
            return {
              ...item,
              latlng: [lat, lng],
              icon: getIcon(item.classId),
            };
          });
      }
    }
  );
};
const getIcon = (classId: string) => {
  const pointCategoryList = props.deviceCategoryList?.point;
  if (pointCategoryList) {
    const obj = pointCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      const iconUrl = getAssetsFile("device/" + image + ".png");
      return L.icon({
        iconUrl,
        iconSize: [32, 32],
        iconAnchor: [16, 27],
      });
    }
  }
};
onMounted(() => getAllPoints());
</script>

<template v-if="positionRef">
  <LMarkerClusterGroup v-if="markerClusterFlag">
    <LMarker
      :key="pointId"
      v-for="{ latlng, pointId, icon } in pointListRef.filter(
        (item: any) => item.visible !== false
      )"
      :lat-lng="latlng"
      :icon="icon"
      @click="onClick"
      :attribution="{ pointId }"
      :draggable="mapAction === MAP_ACTION.MOVE"
    />
  </LMarkerClusterGroup>
  <template v-if="!markerClusterFlag">
    <LMarker
      :key="pointId"
      v-for="{ latlng, pointId, icon } in pointListRef.filter(
        (item: any) => item.visible !== false
      )"
      :lat-lng="latlng"
      :icon="icon"
      @click="onClick"
      :attribution="{ pointId }"
      :draggable="mapAction === MAP_ACTION.MOVE"
    />
  </template>
</template>

<style scoped lang="scss"></style>
